<script setup>
import { ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
import Son from "./components/son.vue";
const num = ref(0.1);
setTimeout(() => {
	num.value = 100;
}, 1000);
const numFromSon = ref(0);
const doNumAdd = (payload, ...argument) => {
	console.log("♥ Hello ♥", payload);
	console.log("♥ Hello ♥", argument);
	console.log(sonRef.value.numSon, "sonRef.value");
};
const sonRef = ref(null);
const show = () => {
	console.log("hahah ");
};
const arr = [1, 2, 3];
let arrNew = [];
arr.forEach((item) => {
  arrNew.push(item + 1);
});
console.log(arrNew, "arrNew");
</script>

<template>
	<!-- <HelloWorld msg="Vite + Vue" /> -->
	<Son
		:num="num"
		:arr="[1, 2]"
		@doNumAdd="doNumAdd($event, '父组件参数1', '父组件参数2')"
		ref="sonRef"
		v-slot="slotProps"
		class="wocao"
		style="font-size: 20px"
		@show="show"
		id="son">
		<template>
			{{ slotProps }}
		</template>
	</Son>
	<button @click="num++">加一</button>
	{{ numFromSon }}
	<router-view></router-view>
</template>

<style scoped>
.logo {
	height: 6em;
	padding: 1.5em;
	will-change: filter;
	transition: filter 300ms;
}

.logo:hover {
	filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
	filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
